<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>匹配对局中...</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
		<style>
			html {
				min-width: 700px;
				min-height: 700px;
				width: 100%;
				height: 100%;
			}
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				display: flex;
				justify-content: flex-end;
			}
			.background-wrapper {
				z-index: -1;
				position: fixed;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(#333 50%, #333 50%);
			}
			.background-wrapper.match-counting-down {
				animation: background-recolor 2s linear infinite;
			}
			@keyframes background-recolor {
				0% { background: linear-gradient(#BBB 50%, #BBB 50%); }
				100% { background: linear-gradient(#333 50%, #333 50%); }
			}
			.background-circle-black {
				position: fixed;
				height: 8192px;
				filter: drop-shadow(#3338 0px 0px 50px);
				background: radial-gradient(circle closest-side, #333 50%, #3330 50%);
			}
			.background-circle-black.match-counting-down {
				animation: background-zoom 2s linear infinite;
			}
			.background-circle-white {
				position: fixed;
				height: 8192px;
				filter: drop-shadow(#BBB8 0px 0px 50px);
				background: radial-gradient(circle closest-side, #BBB 50%, #BBB0 50%);
			}
			.background-circle-white.match-counting-down {
				animation: background-zoom 2s linear infinite 1s;
			}
			@keyframes background-zoom {
				0% { width: 0px; }
				50% { width: 300%; }
				50.0001% { width: 0px; }
			}
			.countdown-timer {
				z-index: 1;
				font-size: 300px;
				font-weight: bolder;
				font-family: Impact;
				text-align: center;
				color: white;
				filter: drop-shadow(#FFF8 0px 0px 20px);
				mix-blend-mode: difference;
			}
			.countdown-timer.match-counting-down {
				animation: timer-pulse 1s linear infinite;
			}
			@keyframes timer-pulse {
				0% { transform: scale(1, 1); }
				15% { transform: scale(1.2, 1.2); }
				30% { transform: scale(1, 1); }
			}
			.countdown-timer-digit {
				width: 160px;
				display: inline-block;
			}

			.matching-title {
				position: fixed;
				font-weight: bolder;
				font-size: 35px;
				mix-blend-mode: difference;
				color: #FFF;
				background-color: #FFF5;
				top: 0px;
				margin-top: 30px;
				white-space: nowrap;
				overflow: hidden;
				width: 280px;
			}

			.cancel-button {
				margin: 30px;
				filter: drop-shadow(#FFF 0px 0px 10px);
				mix-blend-mode: difference;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="background-wrapper match-counting-down">
			<div class="background-circle-black match-counting-down"></div>
			<div class="background-circle-white match-counting-down"></div>
			<div class="countdown-timer match-counting-down">
				<div class="countdown-timer-digit" id="CountdownTimerHigh">3</div><div class="countdown-timer-digit" id="CountdownTimerLow">0</div>
			</div>
			<!-- <div class="matching-title">▋　匹配失败！　▋</div> -->
			<!-- <div class="matching-title">▋　匹配成功！　▋</div> -->
			<div class="matching-title" id="MatchingStateLabel">▋　对局匹配中　▋</div>
		</div>

		<i class='cancel-button fa-solid fa-right-from-bracket fa-3x' id="CancelButton" title="取消匹配" style='color: white'></i>

		<script>
			let Counter = 30, CountingDown = true, CountdownTimerID = 0, StartTimestamp = new Date().getTime();
			function StartCountdown() {
				CountdownTimerID = setInterval(() => {
					if (Counter-- > 0 && CountingDown) {
						CountdownTimerHigh.innerHTML = Math.floor(Counter / 10);
						CountdownTimerLow.innerHTML = Counter % 10;
					}
					else {
						clearInterval(CountdownTimerID);
						if (Counter % 2 == 0)
							$(".background-wrapper").css("background", "linear-gradient(#BBB 50%, #BBB 50%)");
						$(".match-counting-down").removeClass("match-counting-down");
					}
				}, 1000);
			}
			StartCountdown();

			CancelButton.onclick = () => {
				$.post("/Gomokult_war_exploded/servlet/CancelMatchingRequestServlet", {
					userID: sessionStorage.getItem("CurrentUser")
				}, (data) => {
					window.location = "main_page.html";
				});
			};
			window.onbeforeunload = () => {
				$.post("/Gomokult_war_exploded/servlet/CancelMatchingRequestServlet", { userID: sessionStorage.getItem("CurrentUser") });
			};

			/* $.post("/Gomokult_war_exploded/servlet/CancelMatchingRequestServlet", {
				userID: sessionStorage.getItem("CurrentUser")
			}, (message) => {
				$.post("/Gomokult_war_exploded/servlet/GetUserLevelServlet", {
					userID: sessionStorage.getItem("CurrentUser")
				}, (level) => {
					$.post("/Gomokult_war_exploded/servlet/RequestMatchingServlet", {
						userID: sessionStorage.getItem("CurrentUser"),
						timestamp: new Date().getTime(),
						level: level,
					}, (data) => {
						if (data == "?#-1") {
							MatchingStateLabel.innerHTML = "▋　匹配失败！　▋";
							setTimeout(() => { window.location = "main_page.html"; }, 2000);
						}
						else {
							let Tokens = data.split("#");
							let BlackID = Tokens[0] == "B" ? sessionStorage.getItem("CurrentUser") : Tokens[1];
							let WhiteID = Tokens[0] == "W" ? sessionStorage.getItem("CurrentUser") : Tokens[1];
							MatchingStateLabel.innerHTML = "▋　匹配成功！　▋";
							setTimeout(() => { window.location = `chessing.html?black_id=${BlackID}&white_id=${WhiteID}&start_time=${new Date().getTime()}`; }, 2000);
						}
					});
				});
			}); */

			setTimeout(() => {
				CountingDown = false;
				MatchingStateLabel.innerHTML = "▋　匹配失败！　▋";
				setTimeout(() => { window.location = "main_page.html"; }, 2000);
			}, 30 * 1000 + 100);

			$.post("/Gomokult_war_exploded/servlet/GetUserLevelServlet", {
				userID: sessionStorage.getItem("CurrentUser")
			}, (level) => {
				$.post("/Gomokult_war_exploded/servlet/RequestMatchingServlet", {
					userID: sessionStorage.getItem("CurrentUser"),
					timestamp: new Date().getTime(),
					level: level
				}, (data) => {
					if (data != "?#-1") {
						let Tokens = data.split("#");
						let BlackID = Tokens[0] == "B" ? sessionStorage.getItem("CurrentUser") : Tokens[1];
						let WhiteID = Tokens[0] == "W" ? sessionStorage.getItem("CurrentUser") : Tokens[1];
						CountingDown = false;
						MatchingStateLabel.innerHTML = "▋　匹配成功！　▋";
						CancelButton.style.display = "none";
						setTimeout(() => { window.location = `chessing.html?black_id=${BlackID}&white_id=${WhiteID}&start_time=${new Date().getTime()}`; }, 2000);
					}
				});
			});
		</script>
	</body>
</html>
